<template>
	<view class="container">
		<view class="top">
			<!-- 店铺照片卡片 -->
			<uni-card margin="15rpx" class="map-card">
				<view class="map-container">
					<image class="map" :src="selectedImage"></image>
				</view>
				<view class="store-title">
					{{ selectedInfo.name }}
				</view>
				<view class="store-rating">
					<!-- 修改此处 -->
					<uni-rate :value="selectedInfo.rate" max="5" size="28" color="#ffb400" readonly
						allow-half="false" />
					<text class="score">4分</text>
				</view>
				<view class="store-detail-row">
					<view class="store-detail-col">
						<view>营业时间：周一至周五 早上{{ selectedInfo.startTime }}-晚上{{ selectedInfo.endTime }}</view>
						<view>
							位置：{{ selectedInfo.address }}
							<image class="nav-icon" src="/static/autoRepair/navigation.png" mode="aspectFit"
								@click="goToReserve"></image>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 服务项目卡片 -->
		<uni-card margin="15rpx" title="服务项目" style="margin-top: 390rpx;">
			<view v-for="(item, idx) in packages" :key="item.id" class="package-row" @click="selectedPackage = idx">
				<view class="package-radio" @click.stop="toggleCartItem(idx)">
					<view :class="['radio-circle', item.checked ? 'checked' : '']"></view>
				</view>
				<view class="package-info">
					<view class="package-title">{{ item.name }}</view>
					<view class="package-desc">{{ item.introduction }}</view>
				</view>
				<view class="package-price-box">
					<text class="package-price">￥{{ item.presentPrice }}</text>
					<text class="package-origin">￥{{ item.originalPrice }}</text>
				</view>
			</view>
		</uni-card>

		<!-- 服务评价卡片 -->
		<uni-card margin="15rpx" title="服务评价">
			<view class="comment-list">
				<view v-for="comment in comments" :key="comment.id" class="comment-item">
					<image class="avatar" :src="comment.imgs"></image>
					<view class="comment-content">
						<view class="comment-header">
							<view class="comment-user">{{ comment.user }}</view>
							<uni-rate :value="comment.rate" max="5" size="24" color="#ffb400" readonly
								allow-half="false" />
							<view class="comment-date">{{ comment.time }}</view>
						</view>
						<view class="comment-text">{{ comment.content }}</view>
					</view>
				</view>
			</view>
		</uni-card>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<view class="cart-btn" @click="showCart = true">购物车（{{ cartCount }}）</view>
			<view class="confirm-btn" @click="goToConfirm">确认已选服务</view>
		</view>

		<!-- 购物车弹窗 -->
		<view v-if="showCart" class="cart-modal">
			<view class="cart-modal-content">
				<view class="cart-modal-header">
					<text>服务订单</text>
					<text class="cart-modal-close" @click="showCart = false">×</text>
				</view>
				<view class="cart-modal-list">
					<view v-for="(item, idx) in packages" :key="item.id" class="cart-modal-item"
						@click="toggleCartItem(idx)">
						<view :class="['cart-radio', item.checked ? 'checked' : '']"></view>
						<text class="cart-item-title">{{ item.name }}</text>
						<text class="cart-item-price">￥{{ item.presentPrice }}</text>
					</view>
				</view>
				<view class="cart-modal-footer">
					<view class="cart-total-btn">合计：￥{{ totalPrice.toFixed(2) }}</view>
					<view class="cart-confirm-btn" @click="goToConfirm">确认已选服务</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import baseUrl from '@/untils/urlConfig.js'
import request from '@/untils/request.js'
// 服务项目数据
const packages = ref([]);
// 服务评价数据
const comments = ref([]);
// Declare selectedInfo using ref
const selectedInfo = ref(null);
const selectedImage = ref(null);

onLoad((options) => {
	try {
		// Decode and parse selectedInfo
		if (options.selectedInfo) {
			selectedInfo.value = JSON.parse(decodeURIComponent(options.selectedInfo));
			// console.log('selectedInfo:', selectedInfo.value); // Debug output to ensure data is parsed correctly
		}
		// Decode and parse selectedImage
		if (options.selectedImage) {
			selectedImage.value = decodeURIComponent(JSON.parse(options.selectedImage));
			// console.log('selectedImage:', selectedImage.value); // Debug output to ensure data is parsed correctly
		}
	} catch (error) {
		console.error('Data parsing error:', error);
	}
	//获取服务项目
	request({
		url: baseUrl + '/chy/servicedetails/list',
		method: 'GET',
		data: {
			mid: selectedInfo.value.mid,
		},
		success: (res) => {
			if (res.data.code === 200) {
				packages.value = res.data.rows;
				// console.log(packages.value)
			}
		}
	})
	//获取服务评价
	request({
		url: baseUrl + '/chy/evaluate/list',
		method: 'GET',
		data: {
			mid: selectedInfo.value.mid,
		},
		success: (res) => {
			if (res.data.code === 200) {
				comments.value = res.data.rows;
				// console.log(comments.value)
			}
		}
	})
});



function goToReserve() {
	uni.navigateTo({ url: '/pages/autoRepair/navigation/navigation' });
}


const selectedPackage = ref(0);

// Shopping cart popup display
const showCart = ref(false);
// Shopping cart quantity
const cartCount = computed(() => packages.value.filter(i => i.checked).length);
// Total amount
const totalPrice = computed(() =>
	packages.value.filter(i => i.checked).reduce((sum, i) => sum + Number(i.presentPrice), 0)
);
// Toggle selection
function toggleCartItem(idx) {
	packages.value[idx].checked = !packages.value[idx].checked;
}

function goToConfirm() {
    try {
        // 过滤出选中的服务项目
        const selectedPackages = packages.value.filter(item => item.checked);
        // 对选中的服务项目数据进行序列化和编码
        const encodedPackages = encodeURIComponent(JSON.stringify(selectedPackages));
        // 将选中的店铺信息序列化为 JSON 字符串，并进行 URI 编码，以便在 URL 中传递
        const encodedSelectedInfo = encodeURIComponent(JSON.stringify(selectedInfo.value));
        // 获取购物车的总金额
        const total = totalPrice.value;

        // 跳转到确认页面，并传递数据
        uni.navigateTo({
            url: `/pages/autoMaintenance/confirm/confirm?packages=${encodedPackages}&selectedInfo=${encodedSelectedInfo}&total=${total}`
        });
    } catch (error) {
        console.error('数据编码过程中出错:', error);
        uni.showToast({
            title: '数据处理出错，请稍后重试',
            icon: 'none'
        });
    }
}
</script>

<style>
.container {
	background: #fff;
	min-height: 100vh;
	padding-bottom: 80rpx;
}

.top {
	margin-top: -15rpx;
	padding-top: 20rpx;
	height: 300rpx;
	background-color: #3083fb;
}

.map-container {
	position: relative;
	height: 400rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.map-card {
	border-radius: 20rpx !important;
	overflow: hidden;
}

.map {
	width: 100%;
	height: 100%;
}

.map-btn {
	position: absolute;
	top: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	background: #ff7f2a;
	color: #fff;
	padding: 8rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	z-index: 2;
}

.store-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 12rpx;
	margin-top: 40rpx;
}

.store-rating {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.star {
	color: #ffb400;
	font-size: 28rpx;
	margin-right: 12rpx;
}

.score {
	color: #666;
	font-size: 24rpx;
	margin-right: 12rpx;
}

.distance {
	font-size: 24rpx;
}

.store-detail {
	color: #888;
	font-size: 24rpx;
	margin-bottom: 12rpx;
}

.store-img {
	width: 180rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-left: 24rpx;
	object-fit: cover;
}

.store-detail-row {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.store-detail-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.info-card {
	margin-top: 600rpx;
	border-radius: 20rpx !important;
	margin-top: 20rpx;
	overflow: hidden;
}

.service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
}

.service-item {
	background: #f5f7fa;
	border-radius: 12rpx;
	padding: 18rpx 36rpx;
	font-size: 28rpx;
	color: #333;
}

.nav-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 8rpx;
	vertical-align: middle;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.comment-item {
	background: #f8f8f8;
	border-radius: 12rpx;
	padding: 18rpx 24rpx;
}

.comment-user {
	font-weight: bold;
	margin-bottom: 8rpx;
}

.comment-text {
	color: #666;
	margin-top: 8rpx;
}

.btn-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
	vertical-align: middle;
}

.service-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 16rpx;
}

.service-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 32rpx;
	height: 60rpx;
}

.service-name {
	font-size: 28rpx;
	color: #333;
}

.service-price {
	display: flex;
	align-items: baseline;
}

.price {
	color: #ff4d4f;
	font-size: 30rpx;
	margin-right: 8rpx;
}

.origin-price {
	color: #bbb;
	font-size: 24rpx;
	text-decoration: line-through;
}

.divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 0 32rpx;
}

.comment-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 16rpx;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	padding-bottom: 24rpx;
}

.comment-item {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.03);
	padding: 24rpx 24rpx 16rpx 24rpx;
	align-items: flex-start;
}

.avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.comment-content {
	flex: 1;
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.comment-user {
	font-weight: bold;
	font-size: 26rpx;
	margin-right: 12rpx;
}

.comment-date {
	margin-left: auto;
	color: #bbb;
	font-size: 22rpx;
}

.comment-text {
	color: #666;
	font-size: 26rpx;
	line-height: 1.6;
}

.package-row {
	display: flex;
	align-items: flex-start;
	padding: 18rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	cursor: pointer;
}

.package-row:last-child {
	border-bottom: none;
}

.package-radio {
	margin-right: 18rpx;
	margin-top: 8rpx;
}

.radio-circle {
	width: 28rpx;
	height: 28rpx;
	border: 2rpx solid #bbb;
	border-radius: 50%;
	background: #fff;
	position: relative;
}

.radio-circle.checked {
	border-color: #3083fb;
}

.radio-circle.checked::after {
	content: '';
	display: block;
	width: 16rpx;
	height: 16rpx;
	background: #3083fb;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.package-info {
	flex: 1;
}

.package-title {
	font-size: 28rpx;
	color: #222;
	font-weight: 500;
}

.package-desc {
	color: #888;
	font-size: 24rpx;
	margin-top: 6rpx;
}

.package-price-box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 120rpx;
	margin-left: 12rpx;
}

.package-price {
	color: #ff4d4f;
	font-size: 30rpx;
	font-weight: bold;
}

.package-origin {
	color: #bbb;
	font-size: 24rpx;
	text-decoration: line-through;
	margin-top: 2rpx;
}

.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: transparent;
	padding: 18rpx 0 24rpx 0;
}

.cart-btn {
	flex: 1;
	margin: 0 16rpx 0 32rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: linear-gradient(90deg, #3083fb 0%, #4ca2fd 100%);
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	text-align: center;
	font-weight: 500;
	box-shadow: 0 2rpx 8rpx 0 rgba(48, 131, 251, 0.08);
}

.confirm-btn {
	flex: 1;
	margin: 0 32rpx 0 16rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: linear-gradient(90deg, #ff6a00 0%, #ff914d 100%);
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	text-align: center;
	font-weight: 500;
	box-shadow: 0 2rpx 8rpx 0 rgba(255, 106, 0, 0.08);
}

.cart-modal {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.cart-modal-content {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding-bottom: 32rpx;
	animation: slideUp .2s;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.cart-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	padding: 32rpx 32rpx 0 32rpx;
}

.cart-modal-close {
	font-size: 44rpx;
	color: #bbb;
	font-weight: normal;
	cursor: pointer;
}

.cart-modal-list {
	margin: 24rpx 0 0 0;
}

.cart-modal-item {
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	height: 64rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.cart-radio {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 2rpx solid #bbb;
	margin-right: 18rpx;
	background: #fff;
	position: relative;
}

.cart-radio.checked {
	border-color: #3083fb;
}

.cart-radio.checked::after {
	content: '';
	display: block;
	width: 18rpx;
	height: 18rpx;
	background: #3083fb;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cart-item-title {
	flex: 1;
	font-size: 28rpx;
	color: #222;
}

.cart-item-price {
	font-size: 28rpx;
	color: #222;
}

.cart-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	margin-top: 24rpx;
}

.cart-total-btn {
	flex: 1;
	margin-right: 16rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: linear-gradient(90deg, #ffb400 0%, #ffb400 100%);
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	text-align: center;
	font-weight: 500;
}

.cart-confirm-btn {
	flex: 1;
	margin-left: 16rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: linear-gradient(90deg, #ff6a00 0%, #ff914d 100%);
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	text-align: center;
	font-weight: 500;
}
</style>
